import EventEmitter from "@/eventEmitter";
import { DrawTypeEnum } from "./enum";
import rect from "@/assets/rect.png";
import pointer from "@/assets/pointer.png";
import ellipse from "@/assets/ellipse.png";
import polyline from "@/assets/polyline.png";
import bezier from "@/assets/bezier.png";
export default class Header extends EventEmitter {
  dom: HTMLElement;
  btnMap = new Map();
  constructor() {
    super();
    this.dom = document.createElement("div");
    this.dom.classList.add("header");
    this.initHeader();
  }
  initHeader() {
    const noDrawBtn = this.btnCreate(DrawTypeEnum.NO_DRAW, "不绘制", pointer);
    noDrawBtn.classList.add("active");
    this.btnCreate(DrawTypeEnum.RECT_DRAW, "绘制矩形", rect);
    this.btnCreate(DrawTypeEnum.ELLIPSE_DRAW, "绘制椭圆", ellipse);
    this.btnCreate(DrawTypeEnum.POLYLINE_DRAW, "绘制折线", polyline);
    this.btnCreate(DrawTypeEnum.BEZIER_CURVE_DRAW, "绘制贝塞尔曲线", bezier);
  }
  btnCreate(type: string, innerText: string, image: any) {
    const btn = document.createElement("button");
    const img = document.createElement("img");
    img.src = image;
    img.width = 17;
    img.height = 17;
    btn.appendChild(img);
    btn.classList.add("header-button");
    this.dom.appendChild(btn);
    this.btnMap.set(type, btn);
    btn.addEventListener("click", () => {
      this.btnMap.forEach((btn) => {
        btn.classList.remove("active");
      });
      btn.classList.add("active");
      this.btnClick(type);
    });
    return btn;
  }
  btnClick(key: string) {
    this.emit("draw", key);
  }
  changeDrawCommand(drawCommand: DrawTypeEnum) {
    const btm = this.btnMap.get(drawCommand);
    const e = new Event("click");
    btm.dispatchEvent(e);
  }
}
